<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="tree-panel">
          <el-input
            placeholder="搜索设备/工程"
            v-model="filterText"
            clearable
          />
          <el-tree
            class="filter-tree"
            :data="treeData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
            ref="tree"
          />
        </div>
      </el-col>

      <el-col :span="18">
        <div class="data-panel" v-if="currentDevice">
          <el-card class="box-card">
            <div class="card-header">
              <i class="el-icon-office-building"></i>
              工程信息
            </div>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">工程编号</span>
                <span class="value">{{ currentDevice.engineer.serial_number }}</span>
              </div>
              <div class="info-item">
                <span class="label">工程名称</span>
                <span class="value">{{ currentDevice.engineer.name }}</span>
              </div>
              <div class="info-item">
                <span class="label">工程类型</span>
                <span class="value">{{ currentDevice.engineer.type }}</span>
              </div>
              <div class="info-item">
                <span class="label">工程状态</span>
                <span class="value">
                  <el-tag size="small" type="success">{{ currentDevice.engineer.status }}</el-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="label">开始时间</span>
                <span class="value"> {{ formatDate(currentDevice.engineer.create_time) }}</span>
              </div>
              <div class="info-item">
                <span class="label">结束时间</span>
                <span class="value">{{ formatDate(currentDevice.engineer.end_time) }}</span>
              </div>
              <div class="info-item full-width">
                <span class="label">地址</span>
                <span class="value">{{ currentDevice.engineer.address }}</span>
              </div>
              <div class="info-item">
                <span class="label">工程负责人</span>
                <span class="value">{{ currentDevice.engineer.charge_id }}</span>
              </div>
            </div>

            <div class="card-header" style="margin-top: 20px;">
              <i class="el-icon-monitor"></i>
              设备信息
            </div>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">工程设备</span>
                <span class="value">{{ currentDevice.serial_number }}</span>
              </div>
              <div class="info-item">
                <span class="label">设备名称</span>
                <span class="value">{{ currentDevice.name }}</span>
              </div>
              <div class="info-item">
                <span class="label">绑定状态</span>
                <span class="value">
                  <el-tag size="small" type="success">{{ currentDevice.bind_status === 1 ? "已绑定" : "未绑定" }}</el-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="label">在线状态</span>
                <span class="value">
                  <el-tag size="small" type="success">{{ currentDevice.online_status === 1 ? "在线" : "离线" }}</el-tag>
                </span>
              </div>
            </div>
          </el-card>
        </div>

        <div v-else class="no-data">请选择设备进行查看</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      filterText: '',
      treeData: [],
      currentDevice: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      token: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWF0IjoxNzQ1NjM3NDE5LCJleHAiOjE3NDYyNDIxMTl9.v7Lv-oVgFRAnecS2piBirRBCTgzsZZZodDBTZDqoC9A"
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.fetchTree()
  },
  methods: {
    async fetchTree() {
      const res = await axios.get('http://101.37.38.67:7001/dashboard/findEngineerDeviceTree', {
        headers: {
          Authorization: this.token
        }
      })
      this.treeData = res.data.data || []
    },
    async handleNodeClick(node) {
      if (!node.children) {
        try {
          const res = await axios.get('http://101.37.38.67:7001/device/findDeviceDetail', {
            params: {
              id: node.id,
            },
            headers: {
              Authorization: this.token
            }
          })
          this.currentDevice = res.data.data
        } catch (error) {
          console.error('获取设备详情失败:', error)
          this.$message.error('获取设备详情失败')
        }
      }
    },
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const hour = String(d.getHours()).padStart(2, '0')
      const minute = String(d.getMinutes()).padStart(2, '0')
      const second = String(d.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.includes(value)
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
.tree-panel {
  border-right: 1px solid #eee;
  height: calc(100vh - 60px);
  overflow-y: auto;
}
.data-panel {
  padding: 10px;
}
.box-card {
  border-radius: 8px;
}
.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
}
.card-header i {
  margin-right: 8px;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.info-item {
  display: flex;
  align-items: center;
}
.info-item.full-width {
  grid-column: 1 / -1;
}
.label {
  color: #606266;
  min-width: 90px;
}
.value {
  color: #303133;
}
.el-tag {
  border-radius: 4px;
}
.no-data {
  text-align: center;
  color: red;
  line-height: 300px;
}
</style>
